<div class="mat-container">

  <div *ngIf="this.data.instances && this.data.instances.length > 0">
    <mat-table [dataSource]="data.instances" matSort>

      <ng-container matColumnDef="severity">
        <mat-header-cell *matHeaderCellDef mat-sort-header> Severity </mat-header-cell>
        <mat-cell *matCellDef="let row"> {{row.severity}} </mat-cell>
      </ng-container>

      <ng-container matColumnDef="status">
        <mat-header-cell *matHeaderCellDef mat-sort-header> Status </mat-header-cell>
        <mat-cell *matCellDef="let row"> {{row.status}} </mat-cell>
      </ng-container>

      <ng-container matColumnDef="updated">
        <mat-header-cell *matHeaderCellDef mat-sort-header> Last Updated </mat-header-cell>
        <mat-cell *matCellDef="let row"> {{!isDate(row.updated) ? formatDate(row.updated) : row.updated.toString()}} </mat-cell>
      </ng-container>

      <ng-container matColumnDef="path">
        <mat-header-cell *matHeaderCellDef mat-sort-header> Path </mat-header-cell>
        <mat-cell *matCellDef="let row"> {{row.path}} </mat-cell>
      </ng-container>



      <mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></mat-header-row>
      <mat-row *matRowDef="let row; columns: displayedColumns;">
      </mat-row>
    </mat-table>
  </div>

  <!-- If no instances just display a message -->
  <div *ngIf="!this.data.instances || !(this.data.instances.length > 0)">
    No instance details found.
  </div>

</div>
